<script setup lang="ts">
import {ref} from "vue";
import {showToast} from "vant";
import {useI18n} from "vue-i18n";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {bindCard} from "@/api/bankCardApi.ts";
const {t} = useI18n()

const router = useRouter();
const store = useStore();

const form = ref({
  username: '',
  bankName: '',
  bankBranchName:'',
  number:''
})

const submit = () => {

  if (form.value.username == '') {
    showToast(t('placeholder.usernameEmpty'));
    return false;
  }

  if (form.value.bankName == '') {
    showToast(t('placeholder.bankNameEmpty'));
    return false;
  }

  if (form.value.bankBranchName == '') {
    showToast(t('placeholder.bankBranchNameEmpty'));
    return false;
  }

  if (form.value.number == '') {
    showToast(t('placeholder.numberEmpty'));
    return false;
  }

  store.state.loadingState = true;
  bindCard({
    username: form.value.username,
    bank_name: form.value.username,
    bank_branch_name: form.value.username,
    number: form.value.number,
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      router.push({name: 'mine'})
    }
  })
}

</script>

<template>
    <div class="bindCard">
      <div class="form">
        <div class="field-item">
          <label>{{ $t('bindCard.username') }}</label>
          <input type="text" :placeholder="$t('placeholder.usernameEmpty')" v-model="form.username"/>
        </div>
        <div class="field-item">
          <label>{{ $t('bindCard.bankName') }}</label>
          <input type="text" :placeholder="$t('placeholder.bankNameEmpty')" v-model="form.bankName"/>
        </div>
        <div class="field-item">
          <label>{{ $t('bindCard.bankBranchName') }}</label>
          <input type="text" :placeholder="$t('placeholder.bankBranchNameEmpty')" v-model="form.bankBranchName"/>
        </div>
        <div class="field-item">
          <label>{{ $t('bindCard.number') }}</label>
          <input type="text" :placeholder="$t('placeholder.numberEmpty')" v-model="form.number"/>
        </div>
      </div>

      <div class="btn" @click="submit()">
        <span>{{ $t('bindCard.btn') }}</span>
      </div>
    </div>
</template>

<style scoped lang="less">
@import "../../less/bindCard.less";
</style>